<script lang="ts">
	import anime from "animejs";
	function handler() {
		anime({
			targets: ".animation-keyframes-demo .el",
			keyframes: [
				{ translateX: [200, 250], scale: 3 },
				{ translateY: -40, backgroundColor: "#f40" },

				{
					value: "*=2.5", // 100px * 2.5 = '250px'
					duration: 1000,
				},
				{ translateY: 40, opacity: 0.2 },
				{ translateX: 0, backgroundColor: "#fff" },
				{ width: "100%" },
				{ translateY: 0 },
			],
			duration: 4000,
			easing: "easeOutElastic(1, .8)",
			loop: true,
		});
	}
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="demo-content animation-keyframes-demo" on:click={handler}>
	<div class="shadow circle" />
	<div class="circle el keyframes" />
</div>

<style>
	.demo-content {
		min-height: 200px;
	}
	.shadow {
		position: absolute;
		opacity: 0.2;
	}
	.square,
	.circle {
		pointer-events: none;
		position: relative;
		width: 28px;
		height: 28px;
		margin: 45px;
		background-color: currentColor;
		font-size: 14px;
	}

	.circle {
		border-radius: 50%;
	}
</style>
